<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统</title>
    <link rel="shortcut icon" href="../../favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../../styles/common.css">
    <link rel="stylesheet" href="../../styles/login.css">
    <link rel="stylesheet" href="../../styles/icon/iconfont.css"/>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
        }

        body {
            height: 100%;
        }

        .container {
            height: 100vh;
            background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
        }

        .login-wrapper {
            background-color: #fff;
            width: 358px;
            height: 500px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .header {
            font-size: 38px;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
        }

        .input-item {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
        }

        .input-item:placeholder {
            text-transform: uppercase;
        }

        .btn {
            text-align: center;
            padding: 10px;
            width: 100%;
            margin-top: 40px;
            background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
            color: #fff;
        }

        .msg p {
            float: left;
            line-height: 88px;
        }

        .msg a {
            text-decoration-line: none;
            color: #abc1ee;
            float: right;
            line-height: 88px;
        }
    </style>

</head>

<body>
<div id="login-app">
    <div class="container">
        <div class="login-wrapper">
            <div class="header">{{ login }}</div>
            <div class="form-wrapper">
                <input
                        type="text"
                        name="author.phone"
                        v-model="author.phone"
                        placeholder="phone"
                        class="input-item"
                />
                <input
                        type="password"
                        name="author.password"
                        v-model="author.password"
                        placeholder="password"
                        class="input-item"
                />
                <div class="btn" @click="handleLogin()" style="cursor: pointer">{{ login }}</div>
            </div>
            <div class="msg">
                <p><a href="#">忘记密码?</a></p>
                <a href="#">注册</a>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript"
        src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=q9ms5g4EG970C0ZRtduxl00srGtyCeNA"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/author.js"></script>

<script>
    new Vue({
        el: '#login-app',
        data() {
            return {
                login: "登录",
                author: {
                    phone: '13312345678',
                    password: '123456'
                },
                loading: false
            }
        },
        computed: {},
        created() {
        },
        methods: {
            async handleLogin() {
                this.loading = true
                const author = {
                    //用户账号
                    phone: this.author.phone,
                    //用户密码
                    password: this.author.password
                }
                console.log(author)
                await loginApi(author).then(res => {
                    console.log(res)
                    if (res.code === 200) {
                        localStorage.setItem('userInfo', JSON.stringify(res.data))
                        window.location.href = '/author/index.html'
                    } else {
                        this.$message.error("登陆失败")
                        this.loading = false
                    }
                })
            }
        }
    })
</script>
</body>

</html>
